<template>
  <view class="view-check-list">
    <view class="view-check">
      <view>
        <uni-table stripe border>
          <uni-tr>
            <uni-th width="50" align="center">序号</uni-th>
            <uni-th align="center">检查落实项目</uni-th>
            <uni-th width="90" align="center">
              <text>检查落实情况</text>
            </uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in formData.procedureResps" :key="index">
            <uni-td>{{ index + 1 }}</uni-td>
            <uni-td>
              <view class="flex column">
                <text> {{ item.procedureContent }} </text>
                <view v-if="item.procedurePhotos">
                  <view
                    class="flex"
                    v-for="(imgItem, imgIndex) in item.procedurePhotos.split(
                      ','
                    )"
                    :key="imgIndex"
                  >
                    <image
                      :src="`${staticUrl}${imgItem}`"
                      mode="aspectFit"
                      class="work-img"
                      @click="handlePreviewImage(`${staticUrl}${imgItem}`)"
                    ></image>
                  </view>
                </view>
              </view>
            </uni-td>
            <uni-td>{{
              item.procedureResult === '1' ? '已落实' : '未落实'
            }}</uni-td>
          </uni-tr>
        </uni-table>
      </view>
      <view v-for="(item, index) in signs" :key="index">
        <view class="hidden-title">{{
          item.personType === '1' ? '检查人' : '确认人'
        }}</view>
        <view class="img-sign background-white">
          <image
            :src="`${staticUrl}${item.signUrl}`"
            mode="aspectFit"
            class="work-img"
            @click="handlePreviewImage(`${staticUrl}${item.signUrl}`)"
          />
        </view>
      </view>
    </view>
    <Signature
      ref="signature"
      v-model="createPersonSign.signUrl"
      auto-upload
      @success="onSignatureSuccess"
    />
    <view class="submit-group" v-if="!readonly">
      <button class="u-button" type="primary" :ripple="true" @click="submit">
        安全确认签字
      </button>
    </view>
  </view>
</template>
<script>
import Signature from '@/pages/jobSlip/components/ContinueSign.vue';
import { staticUrl } from '@/config.js';
import { getWorkDetail } from '@/api/dock/trucks';
import { bscDockWorkSignObj, bscDockWorkPersonType } from '@/utils/constant.js';
export default {
  components: {
    Signature,
  },
  data() {
    return {
      staticUrl,
      bscDockWorkSignObj,
      bscDockWorkPersonType,
      formData: {
        procedureResps: [],
      },
      saveLoading: false,
      readonly: false,
      subWorkId: '',
      signs: [],
      createPersonSign: {
        signObject: bscDockWorkSignObj.SCHEDULELIST,
        signUrl: '',
      },
    };
  },
  onLoad(params) {
    this.readonly = params.readonly ? true : false;
    if (params.subWorkId) {
      this.subWorkId = params.subWorkId;
      getWorkDetail(this.subWorkId).then(({ data }) => {
        this.formData =
          data.dockWorkInfoResp.formType === '1'
            ? data.dockFormLoadingResp
            : data.dockFormUnloadResp;
        this.signs = this.formData.workSignRespMap[
          bscDockWorkSignObj.SCHEDULELIST
        ]
          ? this.formData.workSignRespMap[bscDockWorkSignObj.SCHEDULELIST]
          : [];
      });
    }
  },
  methods: {
    handlePreviewImage(url) {
      uni.previewImage({
        urls: [url],
      });
    },
    submit() {
      this.$refs.signature.open();
    },
    /**
     * @description  签名成功
     */
    onSignatureSuccess() {
      this._save();
    },
    async _save() {
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.emit('callback:success', {
        createPersonSign: this.createPersonSign,
      });
      uni.navigateBack();
    },
  },
};
</script>
<style lang="scss" scoped>
.view-check-list {
  .hidden-title {
    background: #f5f5f5;
    padding: 20rpx 30rpx;
    color: #999;
  }
  .work-img {
    width: 200rpx;
    height: 100rpx;
    display: inline-block;
    margin-right: 24rpx;
  }
  .img-sign {
    display: flex;
    justify-content: center;
    background-color: #fff;
    .work-img {
      width: 400rpx;
      height: 200rpx;
    }
  }
  .view-check {
    margin-bottom: 110px;
  }
  .submit-group {
    background: #fff;
    z-index: 9;
    padding: 30px;
  }
}
</style>
